<template>
    <div style="margin-top: 2%; margin-left: 5%; margin-right: 5%">
        <Form ref="form" :model="form" :rules="rules" label-position="top">
            <FormItem label="标题" prop="title">
                <Input type="text" v-model="form.title" placeholder="title"></Input>
            </FormItem>
            <FormItem label="描述" prop="des">
                <Input type="text" v-model="form.des" placeholder="description"></Input>
            </FormItem>
            <FormItem label="正文" prop="content">
                <mavon-editor v-model="form.content" style="height: 800px; z-index: 1"></mavon-editor>
            </FormItem>
            <Row :gutter="20">
                <Col :span="12">
                    <FormItem label="标签" prop="tag">
                        <Input type="text" v-model="form.tag" placeholder="tag"></Input>
                    </FormItem>
                </Col>
                <Col :span="12">
                    <FormItem label="图片" prop="img">
                        <Input type="text" v-model="form.img" placeholder="请使用图床，切记加上https://"></Input>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <Button type="primary" style="width: 100px" @click="submit('form')"> 提 交 </Button>
        <span>
            提交后，将由管理员进行审核，审核通过即可正式发布
        </span>
    </div>
</template>

<script>
    export default {
        beforeRouteLeave(to, form, next) {
            alert('你确定离开吗？所留下的内容将不会保存')
            next()
        },
        name: "New",
        created() {

        },
        methods:{
            submit(name){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        const t = this;
                        axios.get('/getUser').then(function (resp) {
                            t.form.uid = resp.data.id;
                            axios.post('/addArticle',t.form).then(function (resp1) {
                                alert('提交成功')
                                location.href = '/do/article'
                            })
                        })
                    } else {
                        this.$Message.error('请检查表单信息');
                    }
                })
            }
        },
        data(){
            return{
                form: {
                    uid: '',
                    title: '',
                    content: '',
                    des: '',
                    tag: '',
                    img: ''
                },
                rules: {
                    title: [
                        { required: true, message: '请输入标题', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '请输入内容', trigger: 'blur' }
                    ],
                    des: [
                        { required: true, message: '请输入描述', trigger: 'blur' }
                    ],
                    tag: [
                        { required: true, message: '请输入标签', trigger: 'blur' }
                    ],
                    img: [
                        { required: true, message: '请输入图片', trigger: 'blur' }
                    ],
                }
            }
        }
    }
</script>

<style scoped>

</style>